<template>
	<div class="address">
		<div class="list-box" v-for="item in addressList">
			<div class="list-info">
				<span>{{item.trueName}}</span>
				<span>{{item.mobile}}</span>
			</div>
			<p>{{item.area_info}}</p>
			<div class="list-item">
				<!--<input type="radio" :id="item.area_id" name="address" v-model="defaultAddress" />
				<label :for="item.area_id">设为默认地址</label>-->

				<div>
					<router-link :to="{path: '/add_address?id=' + item.id}">
						<button class="edit"><i class="iconfont icon-bianji"></i>编辑</button>
					</router-link>
					<button class="delete" @click="handleDeleteItem(item)"><i class="iconfont icon-shanchu"></i>删除</button>
				</div>
			</div>
		</div>
		<router-link :to="{path:'/add_address'}">
			<div class="addBtn">
				<button><i class="iconfont icon-jia"></i>新增地址</button>
			</div>
		</router-link>

	</div>
</template>

<script>
	import { MessageBox, Toast } from 'mint-ui';
	export default {
		data() {
			return {
				addressList: [],
				defaultAddress: ''
			}
		},
		components: {

		},
		methods: {
			getAddressList() {
				this.$http.post('/mobliecart/address.htm', {

				}).then(res => {
					if(res.code == 0) {
						if(res.data.length == 0) {
							MessageBox.confirm('当前还未添加收货地址，前往新增?').then(action => {
								this.$router.replace('/add_address');
							}).catch(res => {});
						}
						this.addressList = res.data;
					}
				})
			},
			handleDeleteItem(row) {
				MessageBox.confirm('确认删除该收货地址?').then(action => {
					this.$http.post('/mobliecart/address_del.htm', {
						mulitId: row.id
					}).then(res => {
						if(res.code == 0) {
							this.getAddressList();
							Toast('删除成功');
						}
					})
				}).catch(res => {});
			}
		},
		created() {
			this.getAddressList();
			this.api.setHeader('收货地址')
		}
	}
</script>

<style lang="less">
	.address {
		button {
			background: none;
			border: none;
			border-radius: .1rem;
			font-size: 14px;
			letter-spacing: 2px;
		}
		.list-box {
			margin: .2rem;
			padding: 0.2rem;
			border: 1px solid #DDDDDD;
			.list-info {
				font-size: .3rem;
				color: #333;
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 0.6rem;
			}
			p {
				margin: 0;
				font-size: .2rem;
				color: #666;
				line-height: 0.6rem;
			}
			.list-item {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				button {
					font-size: 14px;
					letter-spacing: 2px;
					i {
						padding-right: 3px;
						font-size: .36rem;
					}
				}
				button.delete {}
			}
		}
		.addBtn {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			width: 100%;
			position: absolute;
			bottom: 0;
			button {
				color: #fff;
				background-color: #006CB5;
				padding: .14rem .5rem;
				margin-top: .24rem;
				width: 80%;
				margin-bottom: .5rem;
				i {
					font-size: .28rem;
					padding: .1rem;
				}
			}
		}
		input[type="radio"] {
			display: none;
		}
		input[type="radio"]+label::before {
			content: "\a0";
			font-size: 0.24rem;
			display: inline-block;
			vertical-align: middle;
			width: 0.35rem;
			height: 0.35rem;
			margin-right: .2rem;
			border-radius: 50%;
			border: 1px solid #01cd78;
			text-indent: .15em;
			line-height: 1;
			padding: .05rem;
		}
		input[type="radio"]:checked+label::before {
			background-color: #01cd78;
			background-clip: content-box;
		}
	}
</style>